/* eslint-disable @typescript-eslint/no-use-before-define */
import * as AntdIcons from "@ant-design/icons";
import { Tabs, TabsProps } from "antd";
import * as React from "react";
import Category from "./Category";
import type { CategoriesKeys } from "./fields";
import { categories } from "./fields";
import styles from "./style.module.less";
// import { useIntl } from '@umijs/max';
export enum ThemeType {
	Filled = "Filled",
	Outlined = "Outlined",
	TwoTone = "TwoTone"
}

const allIcons: { [key: string]: any } = AntdIcons;

// 綫寬圖標
const OutlinedIcons: React.FC<IconsProps> = props => {
	const { onSelect } = props;
	const newIconNames: string[] = [];
	const renderCategories = React.useMemo<React.ReactNode | React.ReactNode[]>(() => {
		const categoriesResult = Object.keys(categories)
			.map((key: any) => {
				let iconList = categories[key];
				iconList = iconList.filter((icon: string) => icon !== "CopyrightCircle");

				return {
					category: key,
					icons: iconList
						.map((iconName: string) => iconName + ThemeType.Outlined)
						.filter((iconName: string) => allIcons[iconName])
				};
			})
			.filter(({ icons }) => !!icons.length)
			.map(({ category, icons }) => (
				<Category
					key={category}
					title={category as CategoriesKeys}
					theme={ThemeType.Outlined}
					icons={icons}
					newIcons={newIconNames}
					onSelect={(type, name) => {
						if (onSelect) {
							onSelect(name, allIcons[name]);
						}
					}}
				/>
			));
		return categoriesResult;
	}, []);
	return <>{renderCategories}</>;
};
// 填充图标
const FilledIcons: React.FC<IconsProps> = props => {
	const { onSelect } = props;
	const newIconNames: string[] = [];
	const renderCategories = React.useMemo<React.ReactNode | React.ReactNode[]>(() => {
		const categoriesResult = Object.keys(categories)
			.map((key: any) => {
				let iconList = categories[key];
				iconList = iconList.filter((icon: string) => icon !== "CopyrightCircle");

				return {
					category: key,
					icons: iconList.map((iconName: string) => iconName + ThemeType.Filled).filter((iconName: string) => allIcons[iconName])
				};
			})
			.filter(({ icons }) => !!icons.length)
			.map(({ category, icons }) => (
				<Category
					key={category}
					title={category as CategoriesKeys}
					theme={ThemeType.Filled}
					icons={icons}
					newIcons={newIconNames}
					onSelect={(type, name) => {
						if (onSelect) {
							onSelect(name, allIcons[name]);
						}
					}}
				/>
			));
		return categoriesResult;
	}, []);
	return <>{renderCategories}</>;
};
// 双色图标
const TwoToneIcons: React.FC<IconsProps> = props => {
	const { onSelect } = props;
	const newIconNames: string[] = [];
	const renderCategories = React.useMemo<React.ReactNode | React.ReactNode[]>(() => {
		const categoriesResult = Object.keys(categories)
			.map((key: any) => {
				let iconList = categories[key];
				iconList = iconList.filter((icon: string) => icon !== "CopyrightCircle");

				return {
					category: key,
					icons: iconList.map((iconName: string) => iconName + ThemeType.TwoTone).filter((iconName: string) => allIcons[iconName])
				};
			})
			.filter(({ icons }) => !!icons.length)
			.map(({ category, icons }) => (
				<Category
					key={category}
					title={category as CategoriesKeys}
					theme={ThemeType.TwoTone}
					icons={icons}
					newIcons={newIconNames}
					onSelect={(type, name) => {
						console.log(type, name);
						if (onSelect) {
							onSelect(name, allIcons[name]);
						}
					}}
				/>
			));
		return categoriesResult;
	}, []);
	return <>{renderCategories}</>;
};

interface IconSelectorProps {
	//intl: any;
	onSelect: any;
}

interface IconSelectorState {
	theme: ThemeType;
	searchKey: string;
}
interface IconsProps {
	onSelect: any;
}

const IconSelector: React.FC<IconSelectorProps> = props => {
	// const intl = useIntl();
	// const { messages } = intl;
	const { onSelect } = props;
	// TABS
	const items: TabsProps["items"] = [
		{
			key: ThemeType.Outlined,
			label: `线框图标`,
			children: <OutlinedIcons onSelect={onSelect} />
		},
		{
			key: ThemeType.Filled,
			label: `实底图标`,
			children: <FilledIcons onSelect={onSelect} />
		},
		{
			key: ThemeType.TwoTone,
			label: `双色图标`,
			children: <TwoToneIcons onSelect={onSelect} />
		}
	];
	// const [displayState, setDisplayState] = React.useState<IconSelectorState>({
	//   theme: ThemeType.Outlined,
	//   searchKey: '',
	// });

	// const newIconNames: string[] = [];

	// const handleChangeTheme = React.useCallback((e: RadioChangeEvent) => {
	//   setDisplayState((prevState) => ({ ...prevState, theme: e.target.value as ThemeType }));
	// }, []);

	// const renderCategories = React.useMemo<React.ReactNode | React.ReactNode[]>(() => {
	//   const { searchKey = '', theme } = displayState;

	//   const categoriesResult = Object.keys(categories)
	//     .map((key: CategoriesKeys) => {
	//       let iconList = categories[key];
	//       if (searchKey) {
	//         const matchKey = searchKey
	//           // eslint-disable-next-line prefer-regex-literals
	//           .replace(new RegExp(`^<([a-zA-Z]*)\\s/>$`, 'gi'), (_, name) => name)
	//           .replace(/(Filled|Outlined|TwoTone)$/, '')
	//           .toLowerCase();
	//         iconList = iconList.filter((iconName: string) =>
	//           iconName.toLowerCase().includes(matchKey),
	//         );
	//       }

	//       // CopyrightCircle is same as Copyright, don't show it
	//       iconList = iconList.filter((icon: string) => icon !== 'CopyrightCircle');

	//       return {
	//         category: key,
	//         icons: iconList
	//           .map((iconName: string) => iconName + theme)
	//           .filter((iconName: string) => allIcons[iconName]),
	//       };
	//     })
	//     .filter(({ icons }) => !!icons.length)
	//     .map(({ category, icons }) => (
	//       <Category
	//         key={category}
	//         title={category as CategoriesKeys}
	//         theme={theme}
	//         icons={icons}
	//         newIcons={newIconNames}
	//         onSelect={(type, name) => {
	//           if (onSelect) {
	//             onSelect(name, allIcons[name]);
	//           }
	//         }}
	//       />
	//     ));
	//   return categoriesResult.length === 0 ? <Empty style={{ margin: '2em 0' }} /> : categoriesResult;
	// }, [displayState.searchKey, displayState.theme]);
	return (
		<>
			<Tabs className={styles.tabContent} defaultActiveKey="1" items={items} />
			<div style={{ display: "flex", justifyContent: "space-between" }}>
				{/* <Radio.Group
          value={displayState.theme}
          onChange={handleChangeTheme}
          size="large"
          optionType="button"
          buttonStyle="solid"
          options={[
            {
              label: <Icon component={OutlinedIcon} />,
              value: ThemeType.Outlined,
            },
            {
              label: <Icon component={FilledIcon} />,
              value: ThemeType.Filled,
            },
            {
              label: <Icon component={TwoToneIcon} />,
              value: ThemeType.TwoTone,
            },
          ]}
        ></Radio.Group> */}
			</div>
			{/* {renderCategories} */}
		</>
	);
};

export default IconSelector;
